<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let msg = "msg初始值"
        // 1、当页面加载完成后，msg变量值作为 p 标签和 input 输入框的默认值进行显示
        // 2、当对 input 进行内容修改时 ，需要 同步 修改 p 标签的内容值
        // 3、但点击按钮时，以弹出的形式 展示 最新的 msg 变量数据

        // 视图驱动(页面如何变化) - 以DOM元素的构成关系和业务关系的关联实现页面的动态渲染
        let pDom = null;
        let inputDom = null;
        window.onload = function(){
            pDom = document.querySelector("#app>p")
            inputDom = document.querySelector("#app>input[type=text]")
            pDom.innerHTML = msg;
            inputDom.value = msg;
        }
        function changeValue(nv){
            msg = nv;
            pDom.innerHTML = nv;
        }
        function tipMsg(){
            alert(msg)
        }
    </script>
</head>
<body>
    <div id="app">
        <p></p>
        <input type="text" oninput="changeValue(this.value)">
        <input type="button" value="提示" onclick="tipMsg()">
    </div>
</body>
</html>